<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-09-28 14:00:25
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-11-02 10:50:21
 * @FilePath: \old-supply-shop_vue\components\my-search\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <!-- #ifdef APP-PLUS -->
    <!-- 适配状态栏 -->
    <view class="status_bar"></view>
    <!-- #endif -->
    <view
      class="search_style"
      :style="{ top: notTop ? 'unset' : '', background: background}"
    >
      <!-- #ifdef MP-WEIXIN -->
      <my-wxCustomTitleBar :color="color" :leftIcon="false" v-if="site_title" :title="site_title"></my-wxCustomTitleBar>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <view class="title" v-if="site_title" :style="{color: color}">
        {{ site_title }}
      </view>
      <!-- #endif -->
      <view class="search" @click="searchPage">
        <view class="search-content flex flex_col_center">
          <text class="custom-icon custom-icon-chazhao"></text>
          <text class="key gray_font">搜索</text>
        </view>
      </view>
    </view>
    <view class="search_height"></view>
    <!-- #ifdef MP-WEIXIN -->
    <my-wxCustomTitleBar :leftIcon="false" v-if="site_title" title=" "></my-wxCustomTitleBar>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="title_height" v-if="site_title"></view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  props: ["from", "zid", "notTop", "site_title","color"], //notTop:这里默认是搜索在页面最上方，设置了高度。还有搜索框不在最上方的情况
  methods: {
    searchPage() {
      uni.navigateTo({
        url: `/subindex/index/search?from=${this.from}&zid=${this.zid}`,
      });
    },
  },
  data() {
    return {
      background: "transparent",
    };
  },
  mounted(){
  },
};
</script>

<style lang="scss">
.status_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f6f6f7;
  height: var(--status-bar-height);
  z-index: 1000;
}

.search_style {
  position: fixed;
  // #ifndef MP-WEIXIN
  top: var(--status-bar-height);
  //#endif
  left: 0;
  right: 0;
  z-index: 10000;
  background: #ffffff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #e1e1e1;

  .search {
    box-sizing: border-box;
    height: 120rpx;
    padding: 20rpx 0;
    .search-content {
      height: 80rpx;
      padding: 0 38rpx;
      border-radius: 40rpx;
      background: #f0f1f3;
    }
  }
  .custom-icon{
    font-size: 32rpx;
  }
  .key {
    font-size: 30rpx;
    margin-left: 5px;
  }
}

.search_height {
  height: 120rpx;
}
.title_height {
  @include container(100%, 100rpx);
}
.title {
  @include container(360rpx, 100rpx);
  @include font-style(36rpx,#000000, bold);
  @include text-ellipsis;
  line-height: 80rpx;
  padding-top: 20rpx;
  margin: 0 auto;
  text-align: center;
}
</style>
